<template>
  <view class="page-index">
    <view class="background"></view>
    <!-- 搜索框 -->
    <view class="search-box" :style="{paddingTop:`${securityHeight}px`}">
      <view class="search" @tap="toSrearch">
        <view class="icon">
          <image src="/static/img/Search.png" />
        </view>
        <view class="text">
          搜索你感兴趣的
        </view>
      </view>
    </view>
    <!-- banner -->
    <view class="banner">
      <swiper class="img" indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#65492F"
        autoplay="true" circular="true">
        <swiper-item v-for="item in indexImgs" :key="item.imgId" class="item" @tap="gotoLinkUrl(item.linkUrl)">
          <image :src="item.imgUrl" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航 -->
    <view class="nav-box">
      <view class="item" @tap="gotoSign()">
        <view class="icon">
          <image src="/static/img/Group 167.png" />
        </view>
        <view class="text">
          每日签到
        </view>
      </view>
      <view class="item" @tap="gotoCalender()">
        <view class="icon">
          <image src="/static/img/Group 168.png" />
        </view>
        <view class="text">
          活动日历
        </view>
      </view>
      <view class="item" @tap="toMall">
        <view class="icon">
          <image src="/static/img/Group 169.png" />
        </view>
        <view class="text">
          山海商城
        </view>
      </view>
      <view class="item" @tap="toCode">
        <view class="icon">
          <image src="/static/img/Group 170.png" />
        </view>
        <view class="text">
          粉丝社群
        </view>
      </view>
      <view class="item" @tap="gotoActivity(0)">
        <view class="icon">
          <image src="/static/img/Group 174.png" />
        </view>
        <view class="text">
          文化热点
        </view>
      </view>
      <view class="item" @tap="gotoActivity(1)">
        <view class="icon">
          <image src="/static/img/Group 173.png" />
        </view>
        <view class="text">
          精选周边
        </view>
      </view>
      <view class="item" @tap="gotoActivity(2)">
        <view class="icon">
          <image src="/static/img/Group 172.png" />
        </view>
        <view class="text">
          演出门票
        </view>
      </view>
      <view class="item" @tap="gotoActivity(3)">
        <view class="icon">
          <image src="/static/img/Group 88.png" />
        </view>
        <view class="text">
          创意市集
        </view>
      </view>
    </view>

    <!-- 活动资讯 -->
    <view class="activity">
      <view class="title">活动资讯
        <image class="img" src="../../static/img/cloud.png"></image>
        <view class="text" @tap="gotoActivity(-1)">更多 &nbsp;></view>
      </view>

      <view class="item" v-if="PostList.total">
        <image class="cover" :src="PostList.list[0].files[0].fileUrl">
        </image>
        <view class="header text-overflow-clamp-2">{{PostList.list[0].title}}</view>
        <view class="body">
          <view class="content">
            <view class="time text-overflow">{{PostList.list[0].startTime}}</view>
            <view class="location text-overflow">{{PostList.list[0].location || '暂无地址'}}</view>
          </view>
          <button class="button" @tap="gotoPostDetail(PostList.list[0].postId)">立即查看</button>
        </view>
      </view>
      <empty-img v-else padding="0">
        <template #text>
          暂无活动
        </template>
      </empty-img>
    </view>
    <!-- 热门商品 -->
    <view class="hotShop">
      <view class="title" style="margin-left: 34rpx;">热门商品
        <image class="img" src="../../static/img/cloud.png"></image>
      </view>
      <!-- 倒计时窗口 -->
      <view class="countdown-popup" v-if="timeLeft.total > 0">
        <view>
          倒计时
          <span class='countdownTime'>
            {{ timeLeft.days }}
          </span>
          天
          <span class='countdownTime'>
            {{ timeLeft.hours }}
          </span>时<span class='countdownTime'>{{ timeLeft.minutes }}</span>
          分
          <span class='countdownTime'>
            {{ timeLeft.seconds }}
          </span>
          秒
        </view>
        <view style='margin-top: 15rpx;'>
          开售时间：9月14日 22:00
        </view>
      </view>
     <view class="newProds">
        <shop-item :shopItem="item" v-for="item in ShopList" :key="item.spuId"
          @tap="toProdDetail(item.spuId)"></shop-item>
      </view>
      <view class="nomore">
        没有更多了，看看别的吧
      </view>
    </view>
    <view class='footer'>
      <text> Copyright &copy; 2024 台州市新府城文旅演出服务有限公司</text>
    </view>
  </view>
</template>

<script setup>
  import {
    onShareTimeline,
    onShareAppMessage
  } from '@dcloudio/uni-app';
  import {
    reactive,
    ref
  } from 'vue'
  const Data = reactive({
    // 查询的参数
    pageQuery: {
      shopId: 0
    },
    // 返回参数
    noticeData: {
      list: [], // 返回的列表
      total: 0, // 一共多少条数据
      pages: 0 // 一共多少页
    },
    indexImgs: [], // 轮播图
    categoryList: [], // 分类列表
    selectedIndex: 0, // 选中的分类项(默认为第一个分类)
    selectedCategoryId: '',
    // 分类商品列表的请求参数
    searchListQuery: {
      pageSize: 10,
      pageNum: 1,
      primaryCategoryId: '',
      sort: 1 // 新品 1:新品
    },
    // 分类商品列表返回的参数
    searchListData: {
      list: [],
      total: 0, // 总数
      pages: 0 // 总页数
    },
    categoryProdList: [], // 分类的商品列表
    isLoadAll: false, // 是否加载全部
    // 分类滚动栏横向滚动距离
    categoryScrollLeft: 0,
    // 分类滚动的总宽度
    contentScrollW: 0,
    isWechat: false, // 是否为微信环境
  })
  const {
    indexImgs,
    categoryList,
    selectedIndex,
    categoryProdList,
    isLoadAll,
    categoryScrollLeft
  } = toRefs(Data)
  onLoad(() => {
    getSecurityHeight()
    getIndexImgs()
    getList()
    getShopList()
  })
  /**
   * 轮播图
   */
  const getIndexImgs = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/listIndexImg',
      method: 'GET'
    }).then((res) => {
      uni.hideLoading()
      Data.indexImgs = res
    })
  }
  /**
   * 获取安全距离
   */
  const securityHeight = ref(0)
  const getSecurityHeight = () => {
    let app = uni.getSystemInfoSync()
    securityHeight.value = app.statusBarHeight + 3
  }
  /**
   * 添加图片域名
   */
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }
  /**
   * 跳转搜索页
   */
  const toSrearch = () => {
    uni.navigateTo({
      url: '/pages/search-page-index/search-page-index'
    })
  }
  /**
   * 轮播图跳转详情页
   */
  const toDetail = (id) => {
    uni.navigateTo({
      url: '/pages/activity-detail/activity-detail?id=' + id
    })
  }
  /**
   * 跳转积分商城
   */
  const toMall = () => {
    uni.navigateTo({
      url: '/pages/mall-index/mall-index'
    })
  }
  /**
   * 跳转二维码
   */
  const toCode = () => {
    uni.navigateTo({
      url: '/pages/activity-code/activity-code'
    })
  }
  /**
   * 跳转商品详情
   */
  const toProdDetail = (id) => {
    uni.navigateTo({
      url: '/pages/shop-detail/shop-detail?spuId=' + id
    })
  }
  /**
   * 去签到
   */
  const gotoSign = () => {
    if (!uni.getStorageSync('cloudToken')) {
      uni.showModal({
        title: '提示',
        content: '该功能登录后开放哦',
        confirmText: '去登录',
        success: modalRes => {
          if (modalRes.confirm) {
            // 跳转登录页面
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    } else {
      uni.navigateTo({
        url: '/pages/activity-sign/activity-sign'
      })
    }
  }
  const gotoActivity = (index) => {
    uni.navigateTo({
      url: '/pages/activity-zone/activity-zone?index=' + index
    })
  }
  /**
   * 活动日历
   */
  const gotoCalender = () => {
    uni.navigateTo({
      url: '/pages/activity-calendar/activity-calendar'
    })
  }
  /**
   * 查询条件
   */
  const PostList = ref({})
  const queryData = ref({
    pageSize: 1,
    pageNum: 1,
    columns: "status,sectionId,updateTime",
    orders: "DESC,ASC,DESC",
    title: "",
    sectionId: "",
    userId: "",
    sysType: "2",
  })
  /**
   * 获取帖子
   */
  const getList = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/post/page',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      PostList.value = res
      uni.hideLoading()
    })
  }
  /**
   * 获取首页商品
   */
  const ShopList = ref([])
  const getShopList = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_search/ua/search/simple_page?pageSize=4&pageNum=1',
      method: 'GET',
    }).then((res) => {
      ShopList.value = res.list[0].spus
      uni.hideLoading()
    })
  }
  /**
   * 去帖子详情
   */
  const gotoPostDetail = (id) => {
    uni.navigateTo({
      url: '/pages/activity-detail/activity-detail?id=' + id
    })
  }
  /**
   * 跳转LinkUrl
   */
  const gotoLinkUrl = (url) => {
    if (url == null || url == undefined) return
    const arr = String(url).split("://")
    switch (arr[0]) {
      case 'communitySection':
        uni.switchTab({
          url: '/pages/activity-community/activity-community'
        })
        break;
      case 'activitySection':
        uni.navigateTo({
          url: '/pages/activity-zone/activity-zone?navIndex=' + arr[1]
        })
        break;
      case 'post':
        uni.navigateTo({
          url: '/pages/activity-detail/activity-detail?id=' + arr[1]
        })
        break;
      case 'product':
        uni.navigateTo({
          url: '/pages/shop-detail/shop-detail?spuId=' + arr[1]
        })
        break;
    }
  }
  // 开售日期（精确到2024年9月14日 08:00）
  const saleDate = new Date('2024-09-14T22:22:00');



  // 倒计时信息
  const timeLeft = ref({
    total: 0,
    days: '00',
    hours: '00',
    minutes: '00',
    seconds: '00',
  });

  // 计算剩余时间
  const calculateTimeLeft = () => {
    const now = new Date();
    const total = saleDate - now;

    if (total > 0) {
      timeLeft.value = {
        total,
        days: String(Math.floor(total / (1000 * 60 * 60 * 24))).padStart(2, '0'),
        hours: String(Math.floor((total / (1000 * 60 * 60)) % 24)).padStart(2, '0'),
        minutes: String(Math.floor((total / (1000 * 60)) % 60)).padStart(2, '0'),
        seconds: String(Math.floor((total / 1000) % 60)).padStart(2, '0'),
      };
    } else {
      timeLeft.value = {
        total: 0,
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      };
    }
  };

  // 每秒更新倒计时
  let timer;
  onMounted(() => {
    calculateTimeLeft();
    timer = setInterval(calculateTimeLeft, 1000); // 每秒刷新一次
  });

  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style lang="scss" scoped>
  @use "index";
</style>
